<template>
  <div class="main">
    <el-row>
      <el-col :span="24" class="infoTitle">
        <div class="warehouseName">{{ toWarehouse.name }}</div>
        <div>
          <el-popover
            placement="bottom-start"
            title="仓库详细信息"
            width="320"
            trigger="click"
            @show="getOneWaresInfo(toWarehouse.id)"
          >
            <el-form
              label-width="100px"
              :model="wareHouseDetail"
              font-size="14px"
            >
              <el-form-item label="仓库管理员ID">
                <el-input
                  v-model="wareHouseDetail.managerId"
                  disabled
                ></el-input>
              </el-form-item>
              <el-form-item label="仓库创建者">
                <el-input v-model="wareHouseDetail.creator" disabled></el-input>
              </el-form-item>
              <el-form-item label="创建日期">
                <el-input
                  v-model="wareHouseDetail.gmtCreate"
                  disabled
                ></el-input>
              </el-form-item>
            </el-form>
            <el-button size="mini" slot="reference">更多</el-button>
          </el-popover>
        </div>
      </el-col>
    </el-row>
    <el-row class="wareHouseInfo">
      <el-col :span="8">
        <div
          class="imgBox"
          @click="
            () => {
              this.wareHouseDialog();
              this.wareHouseVisible = true;
            }
          "
        >
          <img src="../../../assets/image/仓库.png" alt="" />
        </div>
      </el-col>
      <el-col :span="15">
        <p>仓库ID：{{ toWarehouse.id }}</p>
        <p>仓库面积/m²：{{ toWarehouse.area }}</p>
        <p>管理员：{{ toWarehouse.managerName }}</p>
        <p>创建日期：{{ toWarehouse.gmtCreate }}</p>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="11" class="buttons">
        <div>
          <el-tooltip
            effect="dark"
            content="设置管理员"
            placement="left"
            :enterable="false"
          >
            <el-button
              type="success"
              icon="el-icon-setting"
              size="mini"
              @click="dialogVisible = true"
            ></el-button>
          </el-tooltip>
          <el-tooltip
            effect="dark"
            content="修改仓库信息"
            placement="left"
            :enterable="false"
          >
            <el-button
              @click="editDialogVisible = true"
              size="mini"
              type="primary"
              icon="el-icon-edit"
            ></el-button>
          </el-tooltip>
          <el-button
            size="mini"
            icon="el-icon-delete"
            type="danger"
            @click="deleteWarehouse(toWarehouse.id)"
          ></el-button>
        </div>
      </el-col>
    </el-row>
    <el-dialog width="30%" :visible.sync="dialogVisible" title="设置仓库管理员">
      <el-form :model="managerInfo" label-width="110px">
        <el-form-item label="管理员">
          <el-select
            v-model="managerInfo.managerName"
            placeholder="请选择管理员"
            @change="selectEvent"
          >
            <el-option
              v-for="(item, index) in staffInfoList"
              :key="item.id"
              :label="item.username"
              :value="index"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="setManager">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      @open="openDialog"
      width="30%"
      :visible.sync="editDialogVisible"
      title="修改仓库信息"
    >
      <el-form :model="editInfo" label-width="110px">
        <el-form-item label="创建者">
          <el-select v-model="editInfo.creator" placeholder="请选择创建者">
            <el-option
              v-for="item in staffInfoList"
              :key="item.id"
              :label="item.username"
              :value="item.username"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="管理员">
          <el-select
            v-model="editInfo.name"
            placeholder="请选择管理员"
            @change="selectEvent"
          >
            <el-option
              v-for="(item, index) in staffInfoList"
              :key="item.id"
              :label="item.username"
              :value="index"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="面积">
          <el-input v-model="editInfo.area"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editWarehouseEvent">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog :visible.sync="wareHouseVisible" title="仓库库存信息">
      <el-tabs
        type="border-card"
        v-model="activeName"
        @tab-click="
          (el) => {
            if (el.index === '1') {
              this.getWarehousingInformation(toWarehouse.id);
            } else if (el.index === '2') {
              this.getDeliveryInformation(toWarehouse.id);
            } else {
              this.wareHouseDialog();
            }
          }
        "
      >
        <el-tab-pane label="库存记录" name="first">
          <the-table
            :data="InventoryInformation"
            :page.sync="page"
            :showPage="true"
            :columns="columns"
          >
            <div
              v-for="(item, index) in columns"
              :key="index"
              class="item"
              effect="dark"
              placement="top-start"
            >
              <el-table-column
                :label="item.name"
                align="center"
                :prop="item.prop"
                width="180"
                show-overflow-tooltip
              ></el-table-column></div
          ></the-table>
          <el-pagination
            @size-change="
              (val) => {
                this.page.size = val;
                this.wareHouseDialog();
              }
            "
            @current-change="
              (val) => {
                this.page.page = val;
                this.wareHouseDialog();
              }
            "
            :page-sizes="[5, 10, 15, 20]"
            :page-size="5"
            layout="sizes, prev, pager, next"
            :total="page.total"
          >
          </el-pagination>
        </el-tab-pane>
        <el-tab-pane label="入库记录" name="second">
          <the-table
            :data="WarehousingInformation"
            :page.sync="page"
            :showPage="true"
            :columns="columns"
          >
            <div
              v-for="(item, index) in columns"
              :key="index"
              class="item"
              effect="dark"
              placement="top-start"
            >
              <el-table-column
                :label="item.name"
                align="center"
                :prop="item.prop"
                width="180"
                show-overflow-tooltip
              ></el-table-column></div
          ></the-table>
          <el-pagination
            @size-change="
              (val) => {
                this.page.size = val;
                this.getWarehousingInformation();
              }
            "
            @current-change="
              (val) => {
                this.page.page = val;
                this.getWarehousingInformation();
              }
            "
            :page-sizes="[5, 10, 15, 20]"
            :page-size="5"
            layout="sizes, prev, pager, next"
            :total="page.total"
          >
          </el-pagination>
        </el-tab-pane>
        <el-tab-pane label="出库记录" name="third">
          <the-table
            :data="DeliveryInformation"
            :page.sync="page"
            :showPage="true"
            :columns="columns"
          >
            <div
              v-for="(item, index) in columns"
              :key="index"
              class="item"
              effect="dark"
              placement="top-start"
            >
              <el-table-column
                :label="item.name"
                align="center"
                :prop="item.prop"
                width="180"
                show-overflow-tooltip
              ></el-table-column></div
          ></the-table>
          <el-pagination
            @size-change="
              (val) => {
                this.page.size = val;
                this.getDeliveryInformation();
              }
            "
            @current-change="
              (val) => {
                this.page.page = val;
                this.getDeliveryInformation();
              }
            "
            :page-sizes="[5, 10, 15, 20]"
            :page-size="5"
            layout="sizes, prev, pager, next"
            :total="page.total"
          >
          </el-pagination>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
  </div>
</template>

<script>
import { mapActions, mapState } from "vuex";
import TheTable from "../../common/TheTable";
import {
  getDetailInfo,
  deleteOne,
  setWarehouseManager,
  editWarehouse,
} from "../../../Api/productionmanage/Supply_warehouse";
import {
  getWarehousingInformationBypage,
  getDeliveryInformationBypage,
  getInventoryInformationBypage,
} from "../../../Api/productionmanage/warehousing_information";
export default {
  props: {
    toWarehouse: {
      type: Object,
    },
  },
  components: {
    TheTable,
  },
  data() {
    return {
      wareHouseDetail: {},
      dialogVisible: false,
      managerInfo: {
        managerId: "",
        managerName: this.toWarehouse.managerName,
        warehouseId: this.toWarehouse.id,
      },
      editDialogVisible: false,
      editInfo: {},
      wareHouseVisible: false,
      InventoryInformation: [], //仓库库存记录
      DeliveryInformation: [], //出库记录
      WarehousingInformation: [], //入库记录
      page: {
        total: 0,
        size: 5,
        page: 1,
      },
      activeName: "first",
      columns: [
        { name: "仓库名称", show: true, prop: "name" },
        { name: "管理员", show: true, prop: "managerName" },
        { name: "申请日期", show: true, prop: "gmtCreate" },
        { name: "仓库面积/m", show: true, prop: "area" },
      ],
    };
  },
  computed: {
    ...mapState({
      staffInfoList: (state) => state.roleInfo.staffInfo, //企业所有角色信息
    }),
  },
  created() {},
  methods: {
    async getOneWaresInfo(id) {
      const { data: res } = await getDetailInfo(id);
      console.log(res);
      this.wareHouseDetail = res.data;
      this.editInfo = res.data;
    },
    async deleteWarehouse(id) {
      const confirmResuly = await this.$confirm(
        "此操作将永久删除所选仓库, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch((err) => {
        return err;
      });
      if (confirmResuly !== "confirm") {
        return this.$message.info("已取消删除");
      }
      const { data: res } = await deleteOne(id);
      if (res.statusCode === 20000) {
        this.$message.success("删除仓库成功");
      }
    },
    async setManager() {
      const { data: res } = await setWarehouseManager(this.managerInfo);
      if (res.statusCode === 20000) {
        this.$message.success("设置仓库管理员成功");
        this.dialogVisible = false;
        this.$emit("fatherMethod");
      }
    },
    selectEvent(index) {
      this.managerInfo.managerName = this.staffInfoList[index].username;
      this.managerInfo.managerId = this.staffInfoList[index].id;
      this.editInfo.name = this.staffInfoList[index].username;
      this.editInfo.managerId = this.staffInfoList[index].id;
    },
    openDialog() {
      this.getOneWaresInfo(this.toWarehouse.id);
      this.editDialogVisible = true;
    },
    async editWarehouseEvent() {
      this.editInfo.id = this.toWarehouse.id;
      delete this.editInfo.gmtCreate;
      delete this.editInfo.managerName;
      const { data: res } = await editWarehouse(this.editInfo);
      console.log(res);
      if (res.statusCode === 20000) {
        this.$message.success("修改仓库信息成功");
      }
    },
    async wareHouseDialog() {
      const { data: res } = await getInventoryInformationBypage(
        this.toWarehouse.id,
        this.page.size,
        this.page.size
      );
      console.log(res);
      this.InventoryInformation = res.data.records;
      this.page.total = res.data.total;
    },
    async getWarehousingInformation(id) {
      const { data: res } = await getWarehousingInformationBypage(
        id,
        this.page.size,
        this.page.size
      );
      console.log(res);
      this.WarehousingInformation = res.data.records;
      this.page.total = res.data.total;
    },
    async getDeliveryInformation(id) {
      const { data: res } = await getDeliveryInformationBypage(
        id,
        this.page.size,
        this.page.size
      );
      console.log(res);
      this.DeliveryInformation = res.data.records;
      this.page.total = res.data.total;
    },
  },
};
</script>

<style scoped lang="scss">
* {
  margin: 0;
}
.main {
  border: 1px solid rgb(179, 179, 179);
  width: 31%;
  padding: 5px;
  margin: 0 0 10px 10px;
  border-radius: 4px;
  height: 200px;
  position: relative;
}
.el-row {
  margin-bottom: 0;
}
p {
  color: #636e7b;
  padding-left: 9px;
  line-height: 17px;
  margin-bottom: 3px;
}
el-col {
  border: 1px solid rgb(26, 25, 25);
  height: 100px;
}
.infoTitle {
  display: flex;
  justify-content: space-between;
  .warehouseName {
    color: #000;
    font-size: 20px;
  }
}
.imgBox {
  cursor: pointer;
  width: 100px;
  height: 100px;
  img {
    display: block;
    border: 1px solid rgb(175, 172, 172);
    padding: 5px;
    border-radius: 100%;
    width: 100%;
    height: 100%;
  }
}
.wareHouseInfo {
  height: 115px;
  margin: 20px 0 0 20px;
}
.buttons {
  float: right;
}
el-form.item {
  margin-bottom: 7px;
}
</style>